<template>
  <view>
    <view
      class="desk-manage flex-col page100"
      :style="{ '--theme': themeColor }"
    >
      <nav-bar title="桌码管理" bgColor="#fff" titleColor="#000" />
      <view class="content flex1 flex" v-if="areaList.length > 0">
        <view class="left flex-col">
          <scroll-view scroll-y class="flex1">
            <view
              :class="[
                'area',
                'flex',
                'flex-btw',
                'flexAIC',
                item.id === activeArea.id ? 'active' : '',
              ]"
              v-for="item in areaList"
              :key="item.id"
              @click="changeArea(item)"
            >
              <view class="title">{{ item.name }}区</view>
              <view class="set flex" @click.stop="openOperation(item)">
                <u-icon
                  name="more-dot-fill"
                  size="20"
                  :color="item.id === activeArea.id ? '#fff' : '#888888'"
                />
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="right flex1 flex-col">
          <scroll-view
            scroll-y
            class="flex1"
            lower-threshold="100px"
            @scrolltolower="tolower"
            v-if="deskList.length > 0"
          >
            <view
              class="flex flex-btw flexAIC flex1"
              v-for="(item, index) in deskList"
              :key="item.id"
            >
              <desk-com :desk="item" class="w100" />
            </view>
          </scroll-view>
          <xh-empty title="暂无相关桌码数据" class="flex1" v-else />
        </view>
      </view>
      <xh-empty title="暂无相关桌码数据" class="flex1" v-else />
      <view class="flex footer">
        <view class="footer-btn left center" @click="addArea()">添加区域</view>
        <view class="flex1 footer-btn center" @click="editDesk()"
          >添加桌位号</view
        >
      </view>
    </view>
    <add-area ref="addArea" />
    <add-desk :visible.sync="showAddDesk" ref="addDesk" />
    <u-action-sheet
      :actions="list"
      :closeOnClickAction="true"
      :round="15"
      :safeAreaInsetBottom="true"
      :show="showOperation"
      cancelText="取消"
      :closeOnClickOverlay="true"
      @select="selectClick"
      @close="showOperation = false"
    />
  </view>
</template>
<script>
import addArea from "@/components/pageComponents/sp-deskManage/add-area";
import addDesk from "@/components/pageComponents/sp-deskManage/add-desk";
import deskCom from "@/components/pageComponents/sp-deskManage/desk-com";
import { mapState } from "vuex";
import {
  getShopArea,
  deleteArea,
  getTables,
} from "@/service/api/sp-product/index";

export default {
  data() {
    return {
      activeId: 0,
      areaList: [],
      showAddDesk: false,
      list: [
        {
          name: "编辑",
        },
        {
          name: "删除",
          color: "red",
        },
      ],
      showOperation: false,
      operAtionPar: {},
      deskParams: {
        pageNum: 1,
        pageSize: 20,
        areaId: "",
        pubDomainShopId: "",
      },
      deskList: [],
      total: 0,
      activeArea: {},
      deskType: "add",
    };
  },
  components: { addArea, addDesk, deskCom },
  computed: {
    ...mapState("sp-common/auth", ["pubUserInfo"]),
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
  },
  created() {
    this.getAreaList();
  },
  // onShow(){
  //   this.getAreaList()
  // },
  methods: {
    tolower(e) {
      if (this.deskList.length >= this.total) return;
      this.deskParams.pageNum++;
      this.getDesk();
    },
    changeArea(row) {
      if (this.activeArea.id === row.id) return;
      this.activeArea = row;
      this.deskParams.areaId = row.id;
      this.getDesk(1);
    },
    addArea(row) {
      this.$refs.addArea.open(row);
    },
    // 获取区域列表
    getAreaList() {
      let {
        pubUserInfo: {
          pubDomainShopVo: { id: pubDomainShopId },
        },
      } = this;
      getShopArea({ pubDomainShopId }).then((res) => {
        this.areaList = res;
        this.deskParams.pubDomainShopId = pubDomainShopId;
        this.$store.dispatch("sp-commodity/index/setAreaList", res);
        if (res?.length > 0) {
          this.activeArea = res[0];
          this.deskParams.areaId = res[0].id;
          this.getDesk(1);
        }
      });
    },
    // 打开区域设置
    openOperation(row) {
      this.operAtionPar = row;
      this.showOperation = true;
    },
    // 操作栏
    selectClick(index) {
      let { name } = index;
      let {
        operAtionPar,
        operAtionPar: { id },
        pubUserInfo: {
          pubDomainShopVo: { id: pubDomainShopId },
        },
        areaList, 
        themeColor
      } = this;

      if (name === "删除") {
        uni.showModal({
          content: `是否删除${operAtionPar.name}区域？`,
          confirmColor:themeColor,
          success: (res) => {
            if (res.confirm) {
              if (areaList.length <= 1) {
                uni.showModal({
                  content: "至少需保留一个区域，如需删除请添加新区域后删除",
                  confirmText: "我知道了",
                  confirmColor: themeColor,
                  showCancel:false
                });
                return;
              }
              let params = {
                id,
                pubDomainShopId,
              };
              deleteArea(params)
                .then((res) => {
                  this.getAreaList();
                })
                .catch((err) => {
                  uni.showModal({
                    content: "当前区域已有桌位号不可删除",
                    showCancel: false,
                  });
                });
            }
          },
        });
      } else {
        this.$refs.addArea.open(operAtionPar);
      }
    },
    // 获取桌台
    getDesk(type) {
      let { deskParams } = this;
      if (type) {
        deskParams.pageNum = 1;
        this.deskList = [];
      }
      getTables(deskParams).then((res) => {
        let { total, list } = res;
        this.deskList = [...this.deskList, ...list];
        this.total = total;
      });
    },
    editDesk(data) {
      if (data) {
        this.$refs.addDesk.open(data);
      } else {
        this.$refs.addDesk.open();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.desk-manage {
  background: #f7f7f7;
  .content {
    margin-top: 20rpx;
    .left {
      .area {
        padding: 30rpx;
        color: #888888;
        .title {
          width: calc(26rpx * 3);
          margin-right: 30rpx;
          font-size: 26rpx;
          font-weight: 550;
        }
      }
      .active {
        background-color: var(--theme);
        color: #fff;
      }
    }
    .right {
      position: relative;
      padding: 0 30rpx;
    }
  }
  .footer {
    .left {
      width: 250rpx;
      background-color: #fff !important;
      color: var(--theme) !important;
    }
    .footer-btn {
      background-color: var(--theme);
      padding: 30rpx 0;
      color: #fff;
      font-size: 29rpx;
    }
  }
}
</style>
